<template>
  <el-dialog :title="title" :fullscreen="fullscreen" v-model="expand" :width="width"
             @opened="onOpen" @close="onClose" append-to-body class="no-padding margin">
    <template #default>
      <slot :object="object"></slot>
    </template>
    <template #footer v-if="showButton">
      <div class="pull-right">
        <el-button size="small" @click="close">关闭</el-button>
        <el-button size="small" type="primary" @click="onSubmitClick">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
/* eslint-disable */
import {ref} from 'vue';
import Layers from '@/lang//layers/index';

/**
 * 弹窗
 *
 * 需求：一个界面如果存在大大小小的弹窗，需要控制一堆的参数，这时候我们希望参数能内聚在一个组件中。
 *
 * dialog 开始展开，到完全展开的过程中，有一定的时间延迟，
 * then() 会将回调函数的执行时间，延迟到组件初始化完成。
 *
 * Vue3 环境下，没有这个 bug，不过这个组件可以减少 data 的设置，优化代码的写法
 *
 * 需要注意的是：then() 是一个普通的回调函数，不是 Promise 函数。
 *
 *<pre>
 *this.$refs.dialog.open(dialog).then(() => {
 *  this.$refs.modifyForm.val(scope.row);
 *});
 *</pre>
 */
const props = defineProps({
    // 关闭事件
    onCloseDialog: {type: Function, default: undefined}
    // 内置的提交取消按钮
    , showButton: {type: Boolean, default: false}
    // 确定事件
    , onSubmit: {type: Function, default: undefined}
});

// 是否展开
const expand = ref(false);
// 标题
const title = ref('');
// 宽度
const width = ref('50%');
// 是否全屏
const fullscreen = ref(false);
// 弹窗状态
const opened = ref(false);
// 期望回传给 callback 的一个值，对代码写法有帮助
const object = ref(null);

//回调函数
let callback = null;


/**
 * 提交按钮点击事件
 */
const onSubmitClick = () => {
    Layers.executeFunction(props.onSubmit, object.value);
};

/**
 * 打开弹窗
 */
const open = (opts) => {
    if (opts !== undefined) {
        title.value = opts.title;
        width.value = opts.width || '30%';
        fullscreen.value = opts.fullscreen;
        object.value = opts.object;
    }
    callback = null;
    expand.value = true;

    console.log(opts);

    // TODO:
    return {then};
};


/**
 * 关闭弹窗
 */
const closeDialog = () => {
    expand.value = false;
};

/**
 * 设置回调函数，回调函数会在窗口打开的时候执行
 */
const then = (fun) => {
    if (opened.value) {
        fun();
    } else {
        callback = fun;
    }
};

/**
 * 窗口打开回调
 */
const onOpen = async () => {
    opened.value = true;
    if (callback !== null) {
        callback();
        callback = null;
    }
};

/**
 * 窗口打开回调
 */
const onClose = async () => {
    opened.value = false;
    if (props.onCloseDialog !== undefined) {
        props.onCloseDialog();
    }
};

// Expose methods to the template
defineExpose({open});
</script>
